<template>
	<div style="position: relative;">
		<div style="position: absolute; right: 10px; top: 10px; z-index: 1;">
			<a-button @click="startMove">开始回放</a-button>
			<a-button @click="pauseAnimation">暂停回放</a-button>
			<a-button @click="resumeAnimation">继续回放</a-button>
			<a-select v-model="speed" style="width: 100px; margin-left: 10px;" placeholder="选择倍速" @change="handleSelect($event)">
				<a-select-option :value="'1倍速'">1倍速</a-select-option>
				<a-select-option :value="'2倍速'">2倍速</a-select-option>
				<a-select-option :value="'3倍速'">3倍速</a-select-option>
				<a-select-option :value="'4倍速'">4倍速</a-select-option>
			</a-select>
		</div>
		<!-- <div style="position:absolute; left: 50px; bottom: 30px; z-index: 1; width: 95%; height: 20px;">
			<a-progress :percentage="percentage"></a-progress>
		</div> -->
		<div id="amapcontainer" style="width: 100%; height: 880px"></div>
	</div>
</template>

<script lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
	securityJsCode:'f0bdfdc3bc90deecd78c90719595a104'|| "1b3b86585c863d22db1e7f7636a9e495",
}
import {lineArr} from '/@/json/01.ts'
import bicycle from '/@/assets/image/bicycle.png'
export default {
	data() {
		return {
			map: null, // 高德地图实例
			lineArr:lineArr,
			marker: null,
			polyline: null,
			speed: '1倍速',
			duration: 500,  // 轨迹回放时间
			percentage: 50, // 进度条进度
		}
	},
	methods: {
		// 地图初始化
		initAMap() {
			AMapLoader.load({
				key: "4bbcb216b889f2d612cbed05ae6979c8", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
					'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				// 获取到作为地图容器的DOM元素，创建地图实例
				this.map = new AMap.Map("amapcontainer", { //设置地图容器id
					resizeEnable: true,
					viewMode: "3D", // 使用3D视图
					zoomEnable: true, // 地图是否可缩放，默认值为true
					dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
					doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
					zoom: 17, //初始化地图级别
					center: [
						108.912835,
						34.258541
					],
				})
				
				this.marker = new AMap.Marker({
					position: [
						108.912835,
						34.258541
					],
					// icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
					icon:bicycle,
					offset: new AMap.Pixel(-13, -26),
					iconSize: new AMap.Size(26, 26),
				});
				this.map.add(this.marker)
				
				// 绘制轨迹
				this.polyline = new AMap.Polyline({
					path: this.lineArr,
					showDir: true,
					strokeColor: "#28F",  //线颜色
					// strokeOpacity: 1,     //线透明度
					strokeWeight: 6,      //线宽
					// strokeStyle: "solid"  //线样式
				});
				this.map.add(this.polyline)
				
				// 走过的路径
				this.passedPolyline = new AMap.Polyline({
					strokeColor: "#AF5",  //线颜色
					strokeWeight: 6,      //线宽
				});
				this.map.add(this.passedPolyline)
				let flag= false
				// 监听marker移动
				this.marker.on('moving', (e) => {
					if(!flag){
						console.log('marker动了', e)
						flag= true
					}
					this.passedPolyline.setPath(e.passedPath); // 设置路径样式
					this.map.setCenter(e.target.getPosition(), true) // 设置地图中心点
				});
				
				this.map.setFitView(); // 根据覆盖物自适应展示地图
				
			}).catch(e => {
				console.log(e)
			})
		},
		// 开始回放
		startMove() {
			AMap.plugin('AMap.MoveAnimation', (e) => {
				console.log('开始回放')
				this.marker.moveAlong(this.lineArr, {
					// 每一段的时长
					duration: this.duration,//可根据实际采集时间间隔设置
					// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
					autoRotation: true,
				});
			})
			
		},
		// 暂停回放
		pauseAnimation() {
			this.marker.pauseMove();
		},
		// 继续回放
		resumeAnimation() {
			this.marker.resumeMove();
		},
		// 倍速控制
		handleSelect(e) {
			console.log('e',parseInt(e.charAt(0)))
			this.duration = 500 / parseInt(e.charAt(0))
		}
		
	},
	mounted() {
		//DOM初始化完成进行地图初始化
		this.initAMap()
		// getTrkpt()
	}
}
</script>

<style lang="less"></style>
  
